<template>
  <div id="big">
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
      <div class="box">
        <div v-if="arr===false||arr==''">
          <li class="list_wu">
              <img src="../img/back.png" alt="">
          </li>
         </div>
        <div v-else>


            <div class="list" v-for="(item,index) in this.arr" :key="index">
              <a class="href" :href="'http://dev.hybrid.u76ho.com/#/sixth?resid='+item.res_id+'&userid='+aa">

              </a>
                <div class="list_box">
                  <span class="name">{{item.res_name}}</span>
                  <!-- <div class="tit">待发布</div> -->
                </div>
                <span class="time">任务时间</span>
                <span class="date">{{time(item.start_time)}}/{{time(item.end_time)}}</span>
                <div class="ky">
                  <span class="count">{{item.myc}}</span>
                  <span class="ren">人</span>
                </div>
                <span class="wz">覆盖潜在客源</span>
            </div>

        </div>
      </div>
    </pull-to>
  </div>
</template>
<script>


  import axios from 'axios'
  import PullTo from 'vue-pull-to'

  export default {
    name: 'example',
    components: {
      PullTo
    },
    data(){
        return{
          page:1,
          arr:{ },
          aa:"",
          token:this.GLOBAL.serverSrc
        }
    },
    created(){
          this.getData()
    },
    methods: {
      time(nows){
         var now = new Date(nows*1000);
         var year = now.getFullYear();
         var month = now.getMonth() + 1;
         var date = now.getDate();
         return year + "-" + month + "-" + date;
      },
      getData(){
        var url=this.token+'/adv/mybuy';
        var obj={
          user_id:this.$route.query.userid,
          state:0
        }
        this.aa=this.$route.query.userid
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
            thet.arr=response.data.data
            //console.log(response)
        })
        .catch(function(error) {
            console.log(error);
        });
      },
      refresh(loaded) {
        setTimeout(() => {
          this.getData();
        //  this.dataList.reverse();
          loaded('done');
        }, 200);
      },
      refresha(loaded){
        setTimeout(() => {

          this.page++;
          var url=this.token+"/adv/mybuy?page="+this.page;
          // alert(url);

          var obj={
            user_id:this.$route.query.userid,
            state:0
          }
          var thet=this;
          this.$axios.post(url,obj).then(response=>{
            response.data.data.forEach((item, index) => {

                thet.arr.push(item)
            })
          })
          .catch(function(error) {
              console.log(error);
          });
          loaded('done');
        }, 200);
      }
    }
  }


</script>
<style lang="scss" scoped>
a{
  text-decoration:none;
}
#big{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.box{
  width:100%;
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  margin-top:0.11rem;
  .list:nth-last-of-type(1){
    margin-bottom: 1.1rem;
  }
  .list{
    width:3.49rem;
    height:1.02rem;
    background-image:url("../img/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 0.05rem;
    margin-bottom: 0.08rem;
    position:relative;
    overflow-x: hidden;
    .href{
      width:3.49rem;
      height: 1.02rem;
      display: inline-block;
      position: absolute;
      z-index:5;
      top:0;
      left:0;
    }
    .list_box{
      width:2.3rem;
      display:flex;
      position:absolute;
      top:0.2rem;
      left:0.18rem;
      z-index:1;
      .name{
        color:#1B1B1B;
        font-size:0.15rem;
        font-weight:bold;
      }
      .tit{
        padding:0.02rem;
        background:rgb(255,231,221);
        text-align: center;
        line-height:0.15rem;
        color:#FF6C2B;
        font-size:0.12rem;
        margin-left:0.04rem;
      }
    }
    .time{
      color:#939393;
      font-size:0.11rem;
      position: absolute;
      top:0.6rem;
      left:0.19rem;
      z-index:1;
    }
    .date{
      color:#1B1B1B;
      font-size:0.11rem;
      position:absolute;
      top:0.75rem;
      left:0.18rem;
      z-index:1;
    }
    .ky{
      width:3rem;
      position: absolute;
      top:0.32rem;
      left:2.68rem;
      z-index:1;
      .count{
        color:#FF6C2B;
        font-size:0.3rem;
      }
      .ren{
        color:#FF6C2B;
        font-size:0.12rem;
        margin-left:0.05rem;
      }
    }
    .wz{
      color:#636363;
      font-size:0.11rem;
      position: absolute;
      top:0.74rem;
      left:2.62rem;
      z-index:1;
    }
  }
}
.list_wu{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  img{
    width:2rem;
    height:0.9rem;
    margin-top:48%;
  }
}
</style>
